<template>
  <div class="hotel-disputes">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>酒店纠纷处理</span>
          <el-button-group>
            <el-button type="primary" @click="handleBatchProcess"
              >批量处理</el-button
            >
            <el-button type="success" @click="exportData">导出数据</el-button>
          </el-button-group>
        </div>
      </template>

      <!-- 搜索栏 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="酒店名称">
          <el-input
            v-model="searchForm.hotelName"
            placeholder="请输入酒店名称"
          />
        </el-form-item>
        <el-form-item label="纠纷类型">
          <el-select
            v-model="searchForm.disputeType"
            placeholder="请选择纠纷类型"
          >
            <el-option label="退款纠纷" value="refund" />
            <el-option label="服务质量" value="service" />
            <el-option label="价格争议" value="price" />
            <el-option label="设施损坏" value="facility" />
            <el-option label="其他" value="others" />
          </el-select>
        </el-form-item>
        <el-form-item label="处理状态">
          <el-select v-model="searchForm.status" placeholder="请选择处理状态">
            <el-option label="待处理" value="pending" />
            <el-option label="处理中" value="processing" />
            <el-option label="已完成" value="completed" />
            <el-option label="已关闭" value="closed" />
          </el-select>
        </el-form-item>
        <el-form-item label="提交时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 数据表格 -->
      <el-table
        v-loading="loading"
        :data="disputesList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <template #empty>
          <div class="empty-state">
            <el-empty 
              description="暂无纠纷数据" 
              :image-size="200"
            >
              <div class="empty-text">还没有任何酒店纠纷记录</div>
              <div class="empty-subtext">纠纷记录将在此处显示</div>
            </el-empty>
          </div>
        </template>
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="纠纷ID" width="120" />
        <el-table-column prop="hotelName" label="酒店名称" min-width="180" />
        <el-table-column prop="disputeType" label="纠纷类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getDisputeTypeTag(row.disputeType)">
              {{ getDisputeTypeLabel(row.disputeType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="涉及金额" width="120">
          <template #default="{ row }">
            <span v-if="row.amount">¥{{ row.amount }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="submitTime" label="提交时间" width="160" />
        <el-table-column prop="status" label="处理状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusTag(row.status)">
              {{ getStatusLabel(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button-group>
              <el-button
                type="primary"
                size="small"
                :disabled="
                  row.status === 'completed' || row.status === 'closed'
                "
                @click="handleProcess(row)"
              >
                处理
              </el-button>
              <el-button type="info" size="small" @click="viewDetail(row)">
                详情
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 处理对话框 -->
    <el-dialog v-model="processDialogVisible" title="纠纷处理" width="800px">
      <el-form :model="processForm" label-width="100px">
        <el-form-item label="处理方式">
          <el-radio-group v-model="processForm.method">
            <el-radio label="refund">退款处理</el-radio>
            <el-radio label="compensation">赔偿处理</el-radio>
            <el-radio label="mediation">调解处理</el-radio>
            <el-radio label="reject">驳回申诉</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="处理金额"
          v-if="['refund', 'compensation'].includes(processForm.method)"
        >
          <el-input-number
            v-model="processForm.amount"
            :min="0"
            :precision="2"
            :step="10"
          />
        </el-form-item>
        <el-form-item label="处理说明">
          <el-input
            v-model="processForm.comment"
            type="textarea"
            rows="4"
            placeholder="请输入处理说明"
          />
        </el-form-item>
        <el-form-item label="附加文件">
          <el-upload
            class="upload-demo"
            action="/api/admin/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
          >
            <el-button type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                只能上传 jpg/png/pdf 文件，且不超过 5MB
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="dispute-info">
        <h4>纠纷信息</h4>
        <el-descriptions :column="2" border size="small">
          <el-descriptions-item label="订单号">{{
            currentDispute.orderId
          }}</el-descriptions-item>
          <el-descriptions-item label="入住时间">{{
            currentDispute.checkInDate
          }}</el-descriptions-item>
          <el-descriptions-item label="房型">{{
            currentDispute.roomType
          }}</el-descriptions-item>
          <el-descriptions-item label="订单金额"
            >¥{{ currentDispute.orderAmount }}</el-descriptions-item
          >
          <el-descriptions-item label="申诉内容" :span="2">{{
            currentDispute.content
          }}</el-descriptions-item>
        </el-descriptions>
        <div class="evidence-files" v-if="currentDispute.evidences?.length">
          <h4>证据材料</h4>
          <el-image
            v-for="(url, index) in currentDispute.evidences"
            :key="index"
            :src="url"
            :preview-src-list="currentDispute.evidences"
            fit="cover"
            class="evidence-image"
          />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="processDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitProcess">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="纠纷详情" width="800px">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="纠纷ID">{{
          currentDispute.id
        }}</el-descriptions-item>
        <el-descriptions-item label="酒店名称">{{
          currentDispute.hotelName
        }}</el-descriptions-item>
        <el-descriptions-item label="纠纷类型">
          <el-tag :type="getDisputeTypeTag(currentDispute.disputeType)">
            {{ getDisputeTypeLabel(currentDispute.disputeType) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="涉及金额">
          <span v-if="currentDispute.amount">¥{{ currentDispute.amount }}</span>
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="提交时间">{{
          currentDispute.submitTime
        }}</el-descriptions-item>
        <el-descriptions-item label="处理状态">
          <el-tag :type="getStatusTag(currentDispute.status)">
            {{ getStatusLabel(currentDispute.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="订单信息" :span="2">
          <div>订单号：{{ currentDispute.orderId }}</div>
          <div>入住时间：{{ currentDispute.checkInDate }}</div>
          <div>房型：{{ currentDispute.roomType }}</div>
          <div>订单金额：¥{{ currentDispute.orderAmount }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="申诉内容" :span="2">
          {{ currentDispute.content }}
        </el-descriptions-item>
        <el-descriptions-item label="证据材料" :span="2">
          <div class="evidence-files">
            <el-image
              v-for="(url, index) in currentDispute.evidences"
              :key="index"
              :src="url"
              :preview-src-list="currentDispute.evidences"
              fit="cover"
              class="evidence-image"
            />
          </div>
        </el-descriptions-item>
        <el-descriptions-item
          v-if="currentDispute.status === 'completed'"
          label="处理结果"
          :span="2"
        >
          <div>
            处理方式：{{ getProcessMethodLabel(currentDispute.processMethod) }}
          </div>
          <div v-if="currentDispute.processAmount">
            处理金额：¥{{ currentDispute.processAmount }}
          </div>
          <div>处理说明：{{ currentDispute.processComment }}</div>
          <div>处理时间：{{ currentDispute.processTime }}</div>
          <div>处理人员：{{ currentDispute.processor }}</div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

// 搜索表单
const searchForm = reactive({
  hotelName: "",
  disputeType: "",
  status: "",
  dateRange: [],
});

// 表格数据
const loading = ref(false);
const disputesList = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const selectedDisputes = ref([]);

// 处理对话框
const processDialogVisible = ref(false);
const processForm = reactive({
  method: "",
  amount: 0,
  comment: "",
});

// 详情对话框
const detailDialogVisible = ref(false);
const currentDispute = ref({});

// 获取纠纷类型标签
const getDisputeTypeLabel = (type) => {
  const types = {
    refund: "退款纠纷",
    service: "服务质量",
    price: "价格争议",
    facility: "设施损坏",
    others: "其他",
  };
  return types[type] || type;
};

// 获取纠纷类型标签样式
const getDisputeTypeTag = (type) => {
  const types = {
    refund: "danger",
    service: "warning",
    price: "warning",
    facility: "info",
    others: "",
  };
  return types[type] || "";
};

// 获取状态标签
const getStatusLabel = (status) => {
  const statuses = {
    pending: "待处理",
    processing: "处理中",
    completed: "已完成",
    closed: "已关闭",
  };
  return statuses[status] || status;
};

// 获取状态标签样式
const getStatusTag = (status) => {
  const statuses = {
    pending: "warning",
    processing: "primary",
    completed: "success",
    closed: "info",
  };
  return statuses[status] || "";
};

// 获取处理方式标签
const getProcessMethodLabel = (method) => {
  const methods = {
    refund: "退款处理",
    compensation: "赔偿处理",
    mediation: "调解处理",
    reject: "驳回申诉",
  };
  return methods[method] || method;
};

// 搜索
const handleSearch = () => {
  // 实现搜索逻辑
};

// 重置搜索
const resetSearch = () => {
  Object.keys(searchForm).forEach((key) => {
    searchForm[key] = "";
  });
  handleSearch();
};

// 处理选择变化
const handleSelectionChange = (val) => {
  selectedDisputes.value = val;
};

// 批量处理
const handleBatchProcess = () => {
  if (selectedDisputes.value.length === 0) {
    ElMessage.warning("请选择要处理的纠纷");
    return;
  }
  // 实现批量处理逻辑
};

// 导出数据
const exportData = () => {
  // 实现导出逻辑
};

// 处理单个纠纷
const handleProcess = (row) => {
  currentDispute.value = row;
  processDialogVisible.value = true;
};

// 查看详情
const viewDetail = (row) => {
  currentDispute.value = row;
  detailDialogVisible.value = true;
};

// 提交处理
const submitProcess = () => {
  if (!processForm.method) {
    ElMessage.warning("请选择处理方式");
    return;
  }
  if (
    ["refund", "compensation"].includes(processForm.method) &&
    !processForm.amount
  ) {
    ElMessage.warning("请输入处理金额");
    return;
  }
  if (!processForm.comment) {
    ElMessage.warning("请输入处理说明");
    return;
  }
  // 实现提交处理逻辑
  processDialogVisible.value = false;
  ElMessage.success("处理成功");
};

// 文件上传相关方法
const handlePreview = (file) => {
  // 实现文件预览逻辑
};

const handleRemove = (file, fileList) => {
  // 实现文件移除逻辑
};

const beforeRemove = (file, fileList) => {
  return ElMessageBox.confirm(`确定移除 ${file.name}？`);
};

// 分页相关方法
const handleSizeChange = (val) => {
  pageSize.value = val;
  handleSearch();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  handleSearch();
};
</script>

<style scoped>
.hotel-disputes {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.dispute-info {
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.evidence-files {
  margin-top: 10px;
}

.evidence-image {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  cursor: pointer;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.empty-state {
  padding: 40px 0;
}

.empty-text {
  font-size: 16px;
  color: var(--el-text-color-secondary);
  margin-top: 10px;
}

.empty-subtext {
  font-size: 14px;
  color: var(--el-text-color-placeholder);
  margin-top: 5px;
}

.mt-4 {
  margin-top: 16px;
}
</style>
